<template>
  <div id="cyEditDOMDialog" class="edit-dom-dialog">
    <div class="dialog-header">
      <div class="dialog-title">DOM元素编辑</div>
      <button id="cyEditDOMDialogClose" class="dialog-close" @click="closeDialog">
        ✕✕
      </button>
    </div>

    <div class="dialog-content">
      <div class="form-group">
        <label class="form-label">元素ID</label>
        <input
            type="text"
            id="cyEditDOMDialogId"
            v-model="elementId"
            class="form-input"
            placeholder="输入元素ID"
        >
      </div>

      <div class="form-group">
        <label class="form-label">类名</label>
        <input
            type="text"
            id="cyEditDOMDialogClass"
            v-model="elementClass"
            class="form-input"
            placeholder="输入类名(多个类名用空格分隔)"
        >
      </div>

      <div class="form-group">
        <label class="form-label">文本内容</label>
        <textarea
            id="cyEditDOMDialogText"
            v-model="elementText"
            class="form-textarea"
            placeholder="输入文本内容"
            rows="3"
        ></textarea>
      </div>

      <div class="form-group">
        <label class="form-label">内联样式</label>
        <textarea
            id="cyEditDOMDialogStyle"
            v-model="elementStyle"
            class="form-textarea"
            placeholder="输入CSS样式(如: color: red; font-size: 16px;)"
            rows="3"
        ></textarea>
      </div>

      <div class="form-group">
        <label class="form-label">HTML内容</label>
        <textarea
            id="cyEditDOMDialogHtml"
            v-model="elementHtml"
            class="form-textarea"
            placeholder="输入HTML内容"
            rows="5"
        ></textarea>
      </div>
    </div>

    <div class="dialog-footer">
      <button
          id="cyEditDOMDialogDelete"
          class="btn btn-danger"
          @click="deleteElement"
      >
        <i class="icon-delete"></i> 删除元素
      </button>
      <button
          id="cyEditDOMDialogSave"
          class="btn btn-primary"
          @click="saveChanges"
      >
        <i class="icon-save"></i> 保存更改
      </button>
    </div>
  </div>
</template>
<script>
import { ref, watch, onMounted } from 'vue'

export default {
  props: {
    element: {
      type: HTMLElement,
      required: true
    },
    position: {
      type: Object,
      default: () => ({ x: 0, y: 0 })
    }
  },

  emits: ['close', 'save', 'delete'],

  setup(props, { emit }) {
    // 表单数据
    const elementId = ref('')
    const elementClass = ref('')
    const elementText = ref('')
    const elementStyle = ref('')
    const elementHtml = ref('')

    // 初始化表单数据
    const initFormData = () => {
      if (!props.element) return

      elementId.value = props.element.id || ''
      elementClass.value = props.element.className || ''
      elementText.value = props.element.textContent || ''
      elementStyle.value = props.element.style.cssText || ''
      elementHtml.value = props.element.innerHTML || ''
    }

    // 保存更改
    const saveChanges = () => {
      if (!props.element) return

      const changes = {
        id: elementId.value,
        className: elementClass.value,
        textContent: elementText.value,
        style: elementStyle.value,
        html: elementHtml.value
      }

      emit('save', {
        element: props.element,
        changes
      })
      closeDialog()
    }

    // 删除元素
    const deleteElement = () => {
      if (!props.element) return

      emit('delete', props.element)
      closeDialog()
    }

    // 关闭对话框
    const closeDialog = () => {
      emit('close')
    }

    // 初始化拖拽功能
    const initDrag = () => {
      const dialog = document.getElementById('cyEditDOMDialog')
      const header = dialog.querySelector('.dialog-header')

      let isDragging = false
      let startX = 0
      let startY = 0
      let startLeft = 0
      let startTop = 0

      const startDrag = (e) => {
        isDragging = true
        startX = e.clientX
        startY = e.clientY
        startLeft = parseInt(dialog.style.left) || 0
        startTop = parseInt(dialog.style.top) || 0

        document.addEventListener('mousemove', drag)
        document.addEventListener('mouseup', stopDrag)
        e.preventDefault()
      }

      const drag = (e) => {
        if (!isDragging) return

        const dx = e.clientX - startX
        const dy = e.clientY - startY

        dialog.style.left = `${startLeft + dx}px`
        dialog.style.top = `${startTop + dy}px`
      }

      const stopDrag = () => {
        isDragging = false
        document.removeEventListener('mousemove', drag)
        document.removeEventListener('mouseup', stopDrag)
      }

      header.addEventListener('mousedown', startDrag)
    }

    // 初始化
    onMounted(() => {
      initFormData()
      initDrag()

      // 设置初始位置
      const dialog = document.getElementById('cyEditDOMDialog')
      if (props.position.x !== 0 || props.position.y !== 0) {
        dialog.style.left = `${props.position.x}px`
        dialog.style.top = `${props.position.y}px`
        dialog.style.transform = 'none'
      }
    })

    // 监听元素变化
    watch(() => props.element, initFormData)

    return {
      elementId,
      elementClass,
      elementText,
      elementStyle,
      elementHtml,
      saveChanges,
      deleteElement,
      closeDialog
    }
  }
}
</script>
<style scoped>
.edit-dom-dialog {
  position: fixed;
  width: 600px;
  max-width: 90vw;
  background: rgba(10, 20, 30, 0.95);
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  z-index: 10000;
  border: 1px solid rgba(0, 255, 135, 0.5);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.9);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  display: flex;
  flex-direction: column;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  overflow: hidden;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  cursor: move;
  user-select: none;
}

.dialog-title {
  font-size: 18px;
  font-weight: bold;
  background: linear-gradient(135deg, #ff1f71 0%, #a020f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.dialog-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 5px;
}

.dialog-close:hover {
  color: rgba(255, 255, 255, 0.9);
  transform: rotate(90deg);
}

.dialog-content {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
  max-height: 60vh;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.form-input {
  width: 100%;
  padding: 10px 15px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-family: 'Fira Code', monospace;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-textarea {
  width: 100%;
  padding: 10px 15px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-family: 'Fira Code', monospace;
  resize: vertical;
  min-height: 80px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: rgba(0, 255, 135, 0.5);
  box-shadow: 0 0 0 2px rgba(0, 255, 135, 0.2);
}

.dialog-footer {
  display: flex;
  justify-content: space-between;
  padding: 15px 20px;
  background: rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-weight: bold;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.btn-primary {
  background: linear-gradient(135deg, #00ff87 0%, #60efff 100%);
  color: #111;
}

.btn-danger {
  background: linear-gradient(135deg, #ff1f71 0%, #a020f0 100%);
  color: white;
}

.icon-delete,
.icon-save {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-delete {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16' /%3E%3C/svg%3E");
}

.icon-save {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23111'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4' /%3E%3C/svg%3E");
}

/* 滚动条样式 */
.dialog-content::-webkit-scrollbar {
  width: 8px;
}

.dialog-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.dialog-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

.dialog-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .edit-dom-dialog {
    width: 95vw;
    padding: 15px;
  }

  .dialog-footer {
    flex-direction: column;
    gap: 10px;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }
}
</style>
